<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英雄列表</title>
    <style>
        body {
            margin: 0;
        }

        .hero {
            width: 120px;
            text-align: center;
        }

        #box {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
    </style>
</head>

<body>
    <div id="box">

    </div>
</body>
<script src="./request.js"></script>
<script>
    /* 
     1. 获取英雄列表(发送请求) (V)
     2. 将获取页面
     3. 点击那个英雄跳转到对应的英雄详情页 并将当前英雄id传递到英雄详情页
     4. 在英雄详情页获取英雄id 根据当前英雄id获取英雄详情
     5. 将英雄详情信息渲染到页面上
    */

    // request("get", "https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js").then((res) => {
    //     let html = "";
    //     res.hero.forEach(item => {
    //         // console.log(item)
    //         let div = `<div class='hero' onclick='goInfo(${item.heroId})'><img src="https://game.gtimg.cn/images/lol/act/img/champion/${item.alias}.png" alt=""> <div>${item.name}</div></div>`
    //         html += div;

    //     })
    //     document.querySelector("#box").innerHTML = html;
    // })

    async function getLolList() {
        let res = await request("get", "https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js");
        let html = ''
        res.hero.forEach(item => {
            // console.log(item)
            let div =
                `<div class='hero' onclick='goInfo(${item.heroId})'><img src="https://game.gtimg.cn/images/lol/act/img/champion/${item.alias}.png" alt=""> <div>${item.name}</div></div>`
            html += div;

        })
        document.querySelector("#box").innerHTML = html;
    }
    getLolList();

    function goInfo(heroId) {
        // localStorage.setItem("id",heroId)
        // alert("点按干啥")
        // 跳转到英雄详情页 传递参数使用?分割 url?属性名=属性值&属性名=属性值
        window.location.href = './info.html?id=' + heroId
    }
    //   查看对象中所有属性
    // console.log(document.getElementById("box"))

    //   let arry = [1,2,3,4,67,8 ]
    //   arry.forEach((item,index)=>{
    //     console.log(item,index)  //遍历得到的数组中每一项
    //     //console.log()  //每一项所对应的索引
    //   })
</script>

</html>